<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>物品审批</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css-v=3.3.5.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css-v=4.4.0.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.min.css" tppabs="http://www.zi-han.net/theme/hplus/css/animate.min.css"
          rel="stylesheet">
    <link href="css/style.min.css-v=4.0.0.css" tppabs="http://www.zi-han.net/theme/hplus/css/style.min.css?v=4.0.0"
          rel="stylesheet">
    <!--    <base target="_blank">-->
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
    <style>
        #zhuti {
            height: 100%;

        }

        #zhuti::before {
            background: url('img/lg.jpg') no-repeat fixed center;
            background-size: 300px;
            content: "";
            opacity: 0.2;
            /*透明度设置*/
            width: 80%;
            height: 80%;
            position: absolute;
        }

        #xiaohuiid {
            border-top: 0;
            padding-left: 20px;
            height: 360px;
            background-color: #fff;
            margin-right: -15px;
            margin-left: -15px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins" id="zhuti">
                <div class="ibox-title">
                    <h3 style="font-weight: 600;margin-top: 0;">申请详情</h3>
                    <!--                    <button onclick="correctExport()" class="btn-info" style="float: right;">导出Word</button>-->
                </div>

                <div class="ibox-content">
                    <!--                    upd意思为取消只读-->
                    <div method="post" id="bigform" autocomplete="off" class="form-horizontal">
                        <div id="thing">

                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label">申请人</label>
                            <div class="col-sm-3">
                                <input readonly="readonly" id="sqr" type="text" name="meetingneirong"
                                       placeholder="请输入申请方"
                                       class="form-control"
                                       required>
                            </div>

                            <label class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-4">
                                <input readonly="readonly" id="lxdh" type="text" name="teashu" required placeholder=""
                                       class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属学院</label>
                            <div class="col-sm-3">
                                <input readonly="readonly" id="ssxy" type="text" name="teashu" required placeholder=""
                                       class="form-control">
                            </div>

                            <label class="col-sm-2 control-label">借用原因</label>
                            <div class="col-sm-4">
                                <input readonly="readonly" id="jyyy" type="text" name="meetingname" required
                                       placeholder="请输入借用原因"
                                       class="form-control">
                            </div>
                        </div>

                        <div class="form-group" id="laydate">
                            <label class="col-sm-2 control-label">借用开始时间</label>
                            <div class="col-sm-3">
                                <input readonly="readonly" type="text" name="starttime" required
                                       placeholder="yyyy-MM-dd HH:mm:ss"
                                       class="form-control"
                                       id="test1">
                            </div>

                            <label class="col-sm-2 control-label">借用结束时间</label>
                            <div class="col-sm-4">
                                <input readonly="readonly" type="text" name="endtime" required
                                       placeholder="yyyy-MM-dd HH:mm:ss"
                                       class="form-control"
                                       id="test2">
                            </div>
                        </div>

                        <!--                        延时-->
                        <div id="delayMsg">

                        </div>
                        <div id="delayInMsg" class="form-group">

                        </div>
                        <!-- 	<div class="hr-line-dashed"></div> -->

                        <div class="hr-line-dashed"></div>


                        <!--                        返回功能-->
                        <div class="form-group">
                            <div class="col-sm-3 col-sm-offset-4">
                                <a target="_self" href="myState.html">
                                    <input type="submit"
                                           class="btn btn-info"
                                           value="返回" style="margin-right: 40%">
                                </a>
                            </div>
                        </div>
                        <!--                        延时按钮-->
                        <div id="delayBtn" class="form-group">

                        </div>
                    </div>
                </div>
                <script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
                <script src="js/jquery.min.js-v=2.1.4"
                        tppabs="http://www.zi-han.net/theme/hplus/js/jquery.min.js?v=2.1.4"></script>
                <script src="layui/layer/layer.js" type="text/javascript" charset="utf-8"></script>
                <script type="text/javascript">//----layui框架

                let id = 0;
                let state = "";
                let st = ''
                let et = ''
                let fid = ''
                let endt = ''

                //页面入口函数
                $(document).ready(function ab() {
                    let x = GetRequest();
                    fid = x.fid
                    console.log(fid)
                    getDetail()
                    initialize()
                });

                //是否延时
                function ifDelay() {
                    if (state == '未归还') {
                        //添加延时按钮
                        let str = "<div class=\"col-sm-3 col-sm-offset-4\">\n" +
                            "                                <a>\n" +
                            "                                    <input onclick=\"delayClick()\" type=\"submit\"\n" +
                            "                                           class=\"btn btn-warning\"\n" +
                            "                                           value=\"延时\" style=\"margin-right: 40%\">\n" +
                            "                                </a>\n" +
                            "                            </div>"
                        $("#delayBtn").append(str);

                        //页面添加延时信息
                        let nameString = '<div class="ibox-title">\n' +
                            '                            <h3 style="font-weight: 600;margin-top: 0;padding-right: 500px;">\n' +
                            '                                延时信息:</h3>\n' +
                            '                        </div>'
                        $('#delayMsg').append(nameString);

                        //initialize()
                        //    页面添加延时输入框
                        let inputStre = "<label class=\"col-sm-2 control-label\">借用结束时间</label>\n" +
                            "                            <div class=\"col-sm-3\">\n" +
                            "                                <input type=\"text\" name=\"delaytime\" required\n" +
                            "                                       placeholder=\"yyyy-MM-dd HH:mm:ss\"\n" +
                            "                                       class=\"form-control\"\n" +
                            "                                       id=\"test3\">\n" +
                            "                            </div>"
                        $('#delayInMsg').append(inputStre)

                    }
                }

                //点击延时按钮
                function delayClick() {
                    let endtime = $('#test3').val()
                    if (endtime == '') {
                        layer.alert('借用结束时间不能为空哦！')
                    } else {
                        console.log(fid)
                        console.log(new Date(endtime))
                        $.ajax({
                            type: "POST",
                            url: "user/addDelayRecord",
                            data: {
                                fid: fid,
                                delaytime: new Date(endtime)
                            },
                            success: function (msg) {
                                console.log(msg);
                                layer.alert(msg)
                                $('#delayBtn').hide()
                            }
                        });
                    }
                }

                //批准
                function sy() {
                    let app = $('#spr').val();
                    let xx = "审批通过";
                    $.ajax({
                        type: "POST",
                        url: "admin/doBorrowThingApply",
                        data: {
                            fid: fid,
                            approver: app,
                            mark: '1'
                        },
                        success: function (msg) {
                            $('#tijiao').hide()
                            $('#reset1').hide()
                            console.log(msg);
                            layer.alert(msg);
                        }
                    });
                }

                //拒绝
                function sy2() {
                    let app = $('#spr').val();
                    // let xx = "审批通过";
                    $.ajax({
                        type: "POST",
                        url: "admin/doBorrowThingApply",
                        data: {
                            fid: fid,
                            approver: app,
                            mark: '0'
                        },
                        success: function (msg) {
                            $('#tijiao').hide()
                            $('#reset1').hide()
                            console.log(msg);
                            layer.alert(msg);
                        }
                    });
                }

                <!--	获取url后边的参数-->
                function GetRequest() {
                    const url = location.search; //获取url中"?"符后的字串
                    let theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        let str = url.substr(1);
                        let strs = str.split("&");
                        for (let i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                }

                //分组
                function classify(arr) {
                    let map = {};
                    let myArr = [];
                    for (let i = 0; i < arr.length; i++) {
                        if (!map[arr[i].name]) {
                            myArr.push({
                                name: arr[i].name,
                                data: [arr[i]]
                                // id: arr[i].id,
                                // data: [arr[i]]
                            });
                            map[arr[i].name] = arr[i]
                        } else {
                            for (let j = 0; j < myArr.length; j++) {
                                if (arr[i].name === myArr[j].name) {
                                    myArr[j].data.push(arr[i]);
                                    break
                                }
                            }
                        }
                    }
                    return myArr
                }

                //获取申请详情
                function getDetail() {
                    $.ajax({
                        type: "POST",
                        url: "user/findFlagDTODetail",
                        data: {
                            fid: fid
                        },
                        success: function (msg) {
                            let list = msg.list
                            console.log(msg);
                            endt = msg.endTime
                            state = msg.state;
                            ifDelay()
                            initialize();
                            filling(msg);
                            console.log(classify(list))
                            addThings(classify(list))
                        }
                    });
                }

                //填写底部输入框信息
                function filling(msg) {
                    $('#sqr').val(msg.applicant)
                    $('#lxdh').val(msg.tel)
                    $('#ssxy').val(msg.college)
                    $('#jyyy').val(msg.mes)
                    $('#test1').val(msg.startTime)
                    if (msg.delayThing != null) {
                        $('#test2').val(msg.delayThing.delaytime)
                    } else {
                        $('#test2').val(msg.endTime)
                    }

                }

                //动态添加物品及数量
                function addThings(msg) {
                    console.log(msg)
                    for (let i = 0; i < msg.length; i++) {
                        addName(msg[i].name)
                        let content = '<div class="form-group">'
                        let list = msg[i].data;
                        // console.log(list);
                        for (let j = 0; j < list.length; j++) {
                            content += addSize(list[j].size, list[j].num)
                        }
                        content = content + '</div>';
                        $('#thing').append(content);
                    }
                    addName('具体信息')
                }

                //添加一个物品名称
                function addName(name) {
                    let nameString = '<div class="ibox-title">\n' +
                        '                            <h3 style="font-weight: 600;margin-top: 0;padding-right: 500px;">\n' +
                        '                                ' + name + ':</h3>\n' +
                        '                        </div>'
                    $('#thing').append(nameString);
                }

                //添加物品的一个规格
                function addSize(size, number) {
                    let item = ' <label class="col-sm-3 control-label">' + size + ':</label>\n' +
                        '                            <div class="col-sm-2 row" style="margin-bottom: 14px;">\n' +
                        '                                <input disabled="disabled" value=' + number + ' type="number" class="form-control">\n' +
                        '                            </div>'
                    return item;
                }

                //初始化时间日期选择器
                function initialize() {
                    layui.use('laydate', function () {
                        let laydate = layui.laydate;
                        laydate.render({
                            elem: '#test3',
                            type: 'datetime',
                            min: endt
                        });
                    })
                }

                //获取时间
                function getNowTime() {
                    var myDate = new Date();
                    //获取当前年
                    var year = myDate.getFullYear();
                    //获取当前月
                    var month = myDate.getMonth() + 1;
                    //获取当前日
                    var date = myDate.getDate();
                    var h = myDate.getHours(); //获取当前小时数(0-23)
                    var m = myDate.getMinutes(); //获取当前分钟数(0-59)
                    var s = myDate.getSeconds();
                    let now = year + '-' + p(month) + "-" + p(date) + " " + p(h) + ':' + p(m) + ":" + p(s);
                    return now;
                }

                function p(s) {
                    return s < 10 ? '0' + s : s;
                }
                </script>
                <script src="js/bootstrap.min.js-v=3.3.5"
                        tppabs="http://www.zi-han.net/theme/hplus/js/bootstrap.min.js?v=3.3.5"></script>
                <script src="js/content.min.js-v=1.0.0"
                        tppabs="http://www.zi-han.net/theme/hplus/js/content.min.js?v=1.0.0"></script>
                <script src="js/plugins/iCheck/icheck.min.js"
                        tppabs="http://www.zi-han.net/theme/hplus/js/plugins/iCheck/icheck.min.js"></script>
                <script type="text/javascript" src="../../../tajs.qq.com/stats-sId=9051096"
                        tppabs="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>

</html>
